<template>
	<div>
		<div class="i_index_title">
			<van-icon class="fanhui" @click="fanhui" name="arrow-left" />
			<span class="index_title">优惠券</span>
		</div>
		<div class="tab">
			<van-tabs v-model="activeName">
			  <van-tab title="未使用" name="a">
					<div class="oinp">
						<div class="ninp">
							<div class="inp_input">
								<van-field style="margin-top: 13px;padding: 0;" v-model="value" placeholder="请输入优惠券兑换码" />
							</div>
							<div class="inp_button">
								兑换
							</div>
						</div>
						
					</div>
					<ul class="oul">
						<li class="oul_oli">
							<div class=" oli_img">
								<div class="zi">
									<span class="danwei">￥</span>
									<span class="shuzi">40</span>
									<p>优惠券</p>
								</div>
								<img src="@/assets/shouye/wsy.png" alt="">
							</div>
							<div class="oli_right">
								<p class="oli_right_name">双色球 机选一注</p>
								<p class="oli_right_time">有效期：2021/12/23-2021/</p>
							</div>
							<div class="use" @click="ksjx">
								使用
							</div>
						</li>
					</ul>
				</van-tab>
			  <van-tab title="已使用" name="b">
					<ul class="oul">
						<li class="oul_oli">
							<div class=" oli_img">
								<div class="zi">
									<span class="danwei">￥</span>
									<span class="shuzi">40</span>
									<p>优惠券</p>
								</div>
								<img src="@/assets/shouye/ysy.png" alt="">
							</div>
							<div class="oli_right">
								<p class="oli_right_name">双色球 机选一注</p>
								<p class="oli_right_time">有效期：2021/12/23-2021/</p>
							</div>
						</li>
					</ul>
				</van-tab>
			  <van-tab title="已过期" name="c">
					<ul class="oul">
						<li class="oul_oli">
							<div class=" oli_img">
								<div class="zi">
									<span class="danwei">￥</span>
									<span class="shuzi">40</span>
									<p>优惠券</p>
								</div>
								<img src="@/assets/shouye/ysy.png" alt="">
							</div>
							<div class="oli_right">
								<p class="oli_right_name">双色球 机选一注</p>
								<p class="oli_right_time">有效期：2021/12/23-2021/</p>
							</div>
							<div class="guoqi">
								<img src="@/assets/shouye/ygq.png" alt="">
							</div>
						</li>
					</ul>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
				activeName:0,
				unused:[],
				used:[],
				past:[],
				value:''
	    };
	  },
		methods:{
			fanhui(){
				this.$router.go(-1);
			},
			ksjx(){
				this.$router.push('/selective')
			},
			list(){
				// this.$axios.post('http://caipiao.at99.top/prod-api/webapi/order/couponList',{
				// 	"clientKey": "string",
				// 	"orderBy": "string",
				// 	"pageNum": 0,
				// 	"pageSize": 0,
				// 	"status": 0
				// }).then((res) => {
				// 	console.log(res)
				// })
			}
		}
	};
</script>

<style scoped>
	*{margin: 0; padding: 0;}
	.i_index_title{
		width: 100%;
		height: 50px;
		background-color: #F74A4B;
		position: relative;
	}
	.index_title{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
	}
	.tab{
		width: 100%;
		height: 450px;
		/* border: 1px solid red; */
	}
	.oinp{
		width: 100%;
		height: 50px;
		background-color: white;
	}
	.ninp{
		width: 95%;
		height: 50px;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
	}
	.fanhui{
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
		font-size: 30px;
		color: white;
	}
	.oul{
		width: 90%;
		margin: 20px auto;
	}
	.oul_oli{
		width: 100%;
		height: 100px;
		background-color: white;
		display: flex;
		position: relative;
	}
	.oli_img{
		flex: 1;
		background-size: 100% 100%;
		position: relative;
		color: white;
	}
	.oli_right{
		flex: 2;
	}
	.oli_img>img{
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.oli_right_name{
		margin-top: 10px;
		margin-left: 10px;
		font-weight: 600;
	}
	.oli_right_time{
		margin-left: 10px;
		font-size: 13px;
	}
	.use{
		position: absolute;
		width: 70px;
		height: 25px;
		background-color: #F24B54;
		border-radius: 5px;
		line-height: 30px;
		text-align: center;
		color: white;
		right: 20px;
		bottom: 10px;
		font-size: 13px;
	}
	.zi{
		position: relative;
		z-index: 2;
		text-align: center;
		margin-top: 5px;
	}
	.shuzi{
		font-size: 50px;
	}
	.guoqi{
		width: 60px;
		height: 50px;
		position: absolute;
		right: 5px;
		bottom: 5px;
	}
	.guoqi>img{
		width: 100%;
		height: 100%;
	}
	.inp_button{
		width: 65px;
		height: 35px;
		border-radius: 5px;
		margin-top: 7px;
		background-color: #F74A4B;
		text-align: center;
		line-height: 35px;
		color: white;
	}
	.inp_input{
	}
</style>
